<template>
  <div class="cpn-score-display list" v-if="list.length">
    <div class="item" v-for="(item, index) in list" :key="index" :class="{ [itemClassName]: true, 'is-ellipsis': isEllipsis }" :style="itemStyle">
      <div class="label" :title="item.chkitemName">{{ item.chkitemName }}</div>
      <div class="throw-term" v-if="item.showDataType === 'isThrowTerm'">
        <dict-tag :options="dict.type.cq_eval_result_enum" :value="item.scoreResult" />
      </div>
      <!--<div class="addsub-score" v-else-if="item.showDataType === 'addsubObj'">
        <div class="score-box">
          <div v-if="item.showBuss">
            <div class="flex-x-center">
              <span>事业部：</span>
              <dict-tag :options="dict.type.cq_eval_quality_calc" :value="item.bussCalcType" v-if="item.bussCalcType" />
              <span v-else>{{ item.bussScoreNum }}分</span>
            </div>
            <div class="remark" :title="item.bussRemark" v-if="showRemark && item.bussRemark">描述：{{ item.bussRemark }}</div>
          </div>
          <div v-if="item.showCity">
            <div class="flex-x-center">
              <span>城市公司：</span>
              <dict-tag :options="dict.type.cq_eval_quality_calc" :value="item.cityCalcType" v-if="item.cityCalcType" />
              <span v-else>{{ item.cityScoreNum }}分</span>
            </div>
            <div class="remark" :title="item.cityRemark" v-if="showRemark && item.cityRemark">描述：{{ item.cityRemark }}</div>
          </div>
          <div v-if="item.showPro">
            <div class="flex-x-center">
              <span>项目：</span>
              <dict-tag :options="dict.type.cq_eval_quality_calc" :value="item.proCalcType" v-if="item.proCalcType" />
              <span v-else>{{ item.scoreInput }}分</span>
            </div>
            <div class="remark" :title="item.proRemark" v-if="showRemark && item.proRemark">描述：{{ item.proRemark }}</div>
          </div>
        </div>
      </div>-->
      <div class="addsub-score" v-else-if="item.showDataType === 'addsubObj'">
        <div class="score-box">
          <div class="flex-x-center">经营单位：</div>
          <div v-if="item.showBuss">
            <div class="flex-x-center">
              <span>集群：</span>
              <!--<dict-tag :options="dict.type.cq_eval_quality_calc" :value="item.bussCalcType" v-if="item.bussCalcType" />-->
              <!--<span v-else>{{ item.bussScoreNum }}分</span>-->
              <span>{{ item.bussScoreNum }}分</span>
            </div>
            <div class="remark" :title="item.bussRemark" v-if="showRemark && item.bussRemark">描述：{{ item.bussRemark }}</div>
          </div>
          <div v-if="item.showBuss">
            <div class="flex-x-center">
              <span>事业部：</span>
              <!--<dict-tag :options="dict.type.cq_eval_quality_calc" :value="item.bussCalcType" v-if="item.bussCalcType" />-->
              <!--<span v-else>{{ item.bussScoreNum }}分</span>-->
              <span>{{ item.bussScoreNum }}分</span>
            </div>
            <div class="remark" :title="item.bussRemark" v-if="showRemark && item.bussRemark">描述：{{ item.bussRemark }}</div>
          </div>
          <div v-if="item.showCity">
            <div class="flex-x-center">
              <span>城市公司：</span>
              <dict-tag :options="dict.type.cq_eval_quality_calc" :value="item.cityCalcType" v-if="item.cityCalcType" />
              <span v-else>{{ item.cityScoreNum }}分</span>
            </div>
            <div class="remark" :title="item.cityRemark" v-if="showRemark && item.cityRemark">描述：{{ item.cityRemark }}</div>
          </div>
          <div v-if="item.showPro">
            <div class="flex-x-center">
              <span>项目：</span>
              <dict-tag :options="dict.type.cq_eval_quality_calc" :value="item.proCalcType" v-if="item.proCalcType" />
              <span v-else>{{ item.scoreInput }}分</span>
            </div>
            <div class="remark" :title="item.proRemark" v-if="showRemark && item.proRemark">描述：{{ item.proRemark }}</div>
          </div>
        </div>
        <div class="score-box">
          <div class="flex-x-center">职能部门：</div>
          <div v-if="item.showCity">
            <div class="flex-x-center">
              <span>集群：</span>
              <dict-tag :options="dict.type.cq_eval_quality_calc" :value="item.cityCalcType" v-if="item.cityCalcType" />
              <span v-else>{{ item.cityScoreNum }}分</span>
            </div>
            <div class="remark" :title="item.cityRemark" v-if="showRemark && item.cityRemark">描述：{{ item.cityRemark }}</div>
          </div>
          <div v-if="item.showPro">
            <div class="flex-x-center">
              <span>事业部：</span>
              <dict-tag :options="dict.type.cq_eval_quality_calc" :value="item.proCalcType" v-if="item.proCalcType" />
              <span v-else>{{ item.scoreInput }}分</span>
            </div>
            <div class="remark" :title="item.proRemark" v-if="showRemark && item.proRemark">描述：{{ item.proRemark }}</div>
          </div>
        </div>
        <div class="score-box">
          <div class="flex-x-center">分管领导：</div>
          <div v-if="item.showCity">
            <div class="flex-x-center">
              <span>集群：</span>
              <dict-tag :options="dict.type.cq_eval_quality_calc" :value="item.cityCalcType" v-if="item.cityCalcType" />
              <span v-else>{{ item.cityScoreNum }}分</span>
            </div>
            <div class="remark" :title="item.cityRemark" v-if="showRemark && item.cityRemark">描述：{{ item.cityRemark }}</div>
          </div>
          <div v-if="item.showPro">
            <div class="flex-x-center">
              <span>事业部：</span>
              <dict-tag :options="dict.type.cq_eval_quality_calc" :value="item.proCalcType" v-if="item.proCalcType" />
              <span v-else>{{ item.scoreInput }}分</span>
            </div>
            <div class="remark" :title="item.proRemark" v-if="showRemark && item.proRemark">描述：{{ item.proRemark }}</div>
          </div>
        </div>
      </div>
      <div class="enum-score" v-else-if="item.showDataType === 'enum'">
        <div class="flex-x-center muted score-box">
          <span>得分：</span>
          <dict-tag class="m-l-sm" :options="item.enumDicts" :value="item.scoreInput" />
          <dict-tag class="m-l-sm" :options="dict.type.cq_eval_result_enum" :value="item.scoreResult" />
        </div>
      </div>
      <div class="num-score" v-else>
        <div class="flex-x-center muted score-box">
          <span>得分：{{ item.scoreInput }}{{ item.scoreType === SCORE_TYPE.PERCENT ? '%' : '分' }}</span>
          <dict-tag class="m-l-sm" :options="dict.type.cq_eval_score_level" :value="item.scoreLevel" />
          <dict-tag class="m-l-sm" :options="dict.type.cq_eval_result_enum" :value="item.scoreResult" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 得分展示
import { CQ_EVAL_DATA_TYPE as DATA_TYPE, CQ_EVAL_SCORE_TYPE as SCORE_TYPE, CQ_EVAL_ADDSUB_OBJ as ADDSUB_OBJ, CQ_EVAL_RESULT_ENUM as RESULT } from '@/utils/baseData'
export default {
  name: 'ScoreDisplay',
  props: {
    value: { type: Object, default: () => ({}) },
    cfg: { type: Object, default: () => ({}) },
    showThrowTerm: { type: Boolean, default: false }, // 显示甩项
    showRemark: { type: Boolean, default: false }, // 显示备注内容
    itemClassName: { type: String, default: '' },
    itemStyle: { type: Object, default: () => ({}) },
    isEllipsis: { type: Boolean, default: false } // 描述溢出省略
  },
  dicts: ['cq_eval_quality_calc', 'cq_eval_score_level', 'cq_eval_result_enum'],
  data() {
    return {
      SCORE_TYPE,
      list: []
    }
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler() {
        this.initData()
      }
    }
  },
  methods: {
    initData() {
      const cfgInfo = this.cfg || {}
      const cfgs = cfgInfo.children || []
      const evalScore = this.value || {}
      let scores = JSON.parse(JSON.stringify(evalScore.scores || []))
      // 甩项不展示
      if (!this.showThrowTerm) scores = scores.filter(i => i.scoreResult !== RESULT.THROWTERM)

      if (!cfgs.length || !scores.length) return (this.list = [])

      const cfgMap = cfgs.reduce((o, i) => !void (o[i.chkitemCode] = i) && o, {})

      scores.map(i => {
        const cfg = cfgMap[i.chkitemCode]
        if (!cfg) return

        const { dataType, scoreType, addsubObj } = cfg
        i.chkitemName = cfg.chkitemName
        i.seq = cfg.seq || 0
        i.showDataType = 'num'

        if (i.scoreResult === RESULT.THROWTERM) {
          i.showDataType = 'isThrowTerm'
          return
        }
        if (addsubObj) {
          i.showDataType = 'addsubObj'
          i.isSub = scoreType === SCORE_TYPE.SUB

          const arr = addsubObj.split(',').filter(i => i)
          i.showBuss = arr.includes(ADDSUB_OBJ.BUSSNIESS)
          i.showCity = arr.includes(ADDSUB_OBJ.CITY)
          i.showPro = arr.includes(ADDSUB_OBJ.PROJECT)
          return
        }
        if (dataType === DATA_TYPE.ENUM) {
          i.showDataType = 'enum'
          i.enumDicts = cfg.enumDicts || []
          return
        }
      })
      // 排序
      scores.sort((a, b) => {
        if (a.seq !== b.seq) return b.seq - a.seq
        return (a.chkitemCode || '').localeCompare(b.chkitemCode || '')
      })
      this.list = scores
      this.list[0].chkitemName = '工程策划: 出现重大偏离应及时重新召开策划会'
      this.list[1].chkitemName = '结构安全: 不得出现结构安全事故'
    }
  }
}
</script>
<style lang="scss" scoped>
.m-l-sm {
  margin-left: 10px;
}
.flex-x-center {
  display: flex;
  align-items: center;
}
.muted {
  color: #606266;
}
.red {
  color: #f56c6c;
}
.list {
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  color: #303133;
}
.item {
  max-width: 250px;
  background-color: #f5f7fa;
  border-radius: 5px;
  padding: 5px 10px;
  margin: 0 5px 5px 0;
  &.is-ellipsis {
    .remark {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.label {
  max-width: 100%;
  display: inline-block;
  padding: 3px 5px;
  font-size: 12px;
  border-radius: 3px;
  line-height: 1;
  color: white;
  background-color: #838a9d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.addsub-score {
  .remark {
    color: #606266;
    font-size: 12px;
    line-height: 1.2;
    zoom: 0.9;
    border-left: 5px solid #dcdfe6;
    padding: 2px 0 2px 4px;
    margin: 4px 0 10px;
  }
}
</style>
